<template>
  <div class="center">
      <!--tab切换-->
      <n-data-table
        ref="table"
        :columns="columns"
        :data="data"
        :pagination="pagination"
      >
        <!-- <template #empty>  </template> -->
      </n-data-table>
    <Model :showModal="showModal" :formValue="formValue" :ModelObj="Obj" :FormData="FormData" @ModelClick="ModelClick"></Model>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, ref, reactive } from 'vue';
import aIcon from '../../../../assets/icons/Icon.vue';
import Search from '../../../../assets/icons/Search.vue'
import { NButton } from 'naive-ui';
import { Model } from '@/components/Model';
import { toRaw } from '@vue/reactivity'
export default defineComponent({
  components: {
    aIcon,
    Search,
    Model,
  },
  setup(props,{ emit }) {
    const showModal = ref(false);
    const size = ref('large')
    const Obj = ref({});
    const formValue = ref({})
    const pagination = ref({})
    const columns = ref([
        { title: '序号', key: 'key' },
        { title: '标题', key: 'biaoti' },
        {
          title: '行业类型',
          key: 'leixing',
          render(row) {
            return row.leixing ? row.leixing : '-'
          },
        },
        {
          title: '视频地址',
          key: 'video',
          render(row) {
            return row.video ? row.video : '-'
          },
        },
        {
          title: '视频时长',
          key: 'videoTime',
          render(row) {
             return row.videoTime ? row.videoTime : '-'
          },
        },
        {
          title: '视频大小',
          key: 'videoSize',
          render(row) {
            return row.videoSize ? row.videoSize : '-'
          },
        },
        {
          title: '标签',
          key: 'biaoqian',
          render(row) {
            return row.biaoqian ? row.biaoqian : '-'
          },
        },
        {
          title: '题目来源',
          key: 'laiyuan',
          render(row) {
            return row.laiyuan ? row.laiyuan : '-'
          },
        },
        {
          title: '操作',
          key: 'button',
          render(row) {
            const button = row.button.map((tagKey) => {
              return h(
                NButton,
                {
                  style: {
                    marginRight: '10px',
                  },
                  type: 'primary',
                  size: 'small',
                  tag:'a',
                  text:true,
                  onClick: () => sendMail(row,tagKey),
                },
                {
                  default: () => tagKey,
                }
              );
            });
            return button;
          },
        },
      ])
  
    //搜索
    const info = (row) => {
      console.log(formValue)
      console.log(pagination)
    };
    //表格按钮点击
    const sendMail = (row,name) => {
      console.log(name)
      formValue.value = toRaw(row)
      console.log(formValue)
      showModal.value = true
    };
    //新增按钮点击
    const add = (row) => {
      Obj.value = {title:row}
      showModal.value = true;
      formValue.value = {}
    };
    //接受子组件传递过来的事件
    const ModelClick = (row) => {
      showModal.value = row;
    };
    return {
      size,
      formValue,
      pagination,
      data: reactive([
        {
          key: 1,
          tixing: '这是题型',
          leixing: '这是类型',
          biaoqian: '这是标签',
          lingyu:'这是领域',
          biaoti: '这是标题',
          neirong: '这是内容',
          xuanxiang: '这是选项',
          daan: '这是答案',
          jiexi: '这是解析',
          button: ['查看','编辑', '删除'],
        },
        {
          key: 2,
          tixing: '这是题型',
          leixing: '这是类型',
          biaoqian: '这是标签',
          lingyu:'这是领域',
          biaoti: '这是标题',
          neirong: '这是内容',
          xuanxiang: '这是选项',
          daan: '这是答案',
          jiexi: '这是解析',
          button: ['查看','编辑', '删除'],
        },
      ]),
     
      columns,
      FormData:reactive([
        {label:'题型',type:'n-radio-group',enName:'tixing',clearable: true,size: 'small',placeholder:'请选择题型',options:[{label:'单选题',value:'单选题'},{label:'多选题',value:'多选题'},{label:'判断题',value:'判断题'},{label:'视频题目',value:'视频题目'}]},
        {label:'行业类型',type:'n-select',enName:'leixing',clearable: true,size: 'small',placeholder:'请选择行业类型',options: [{ label: '徐力111', value: '这是类型' },{ label: '徐丽丽李111', value: '徐丽丽李111' }]},
        {label:'标签',type:'n-select',enName:'biaoqian',clearable: true,size: 'small',placeholder:'请选择标签',options: [{ label: '徐力111', value: '这是标签	' },{ label: '徐丽丽李111', value: 2 }]},
        {label:'标题',type:'n-input',enName:'biaoti',clearable: true,size: 'small',placeholder:'请输入标题',},
        {label:'题目内容',type:'n-input',cenName:'neirong',learable: true,size: 'small',placeholder:'请输入题目内容',},
        {label:'选项',type:'n-input',enName:'xuanxiang',clearable: true,size: 'small',placeholder:'请输入选项',},
        {label:'答案',type:'n-input',enName:'daan',clearable: true,size: 'small',placeholder:'请输入答案',},
        {label:'解析',type:'n-input',enName:'jiexi',InputType:'textarea',clearable: true,size: 'small',placeholder:'请输入解析内容',},
      ]),
      TabsList:[
        {name:'试题',tab:'试题'},
        {name:'视频',tab:'视频'}
      ],
      info,
      add,
      sendMail,
      showModal,
      Obj,
      ModelClick,
    };
  },
});
</script>
<style lang="less" scoped>

</style>
